import { Dropdown, Button } from 'antd';
import { useMemo } from 'react';

import { useEditorStore } from '@/store/useEditorZustand';
import { lineHeights } from '../../_const';
import { ListCollapse } from 'lucide-react';

const LineHeightButton = () => {
  const { editor } = useEditorStore();

  const lineHeightsItem = useMemo(
    () =>
      lineHeights.map((item) => {
        return {
          ...item,
          label: (
            <Button
              type="text"
              onClick={() => editor?.chain().focus().setLineHeight(item.value).run()}
            >
              {item.label}
            </Button>
          ),
        };
      }),
    [editor]
  );

  return (
    <Dropdown menu={{ items: lineHeightsItem }} placement="bottomLeft" arrow>
      <Button icon={<ListCollapse className="size-4" />} type="text" />
    </Dropdown>
  );
};

export default LineHeightButton;
